/**
 * @Author: luqimin
 * @Date:   2017-11-20 16:66:66
 */

import React, {Component} from 'react';
import styles from '../Message/index.less';
import CSSModules from 'react-css-modules';
import {Link} from 'react-router-dom';
import PageHeader from 'ant-design-pro/lib/PageHeader';
import {
  Button,
  Icon,
  Dropdown,
  Avatar,
  Tag,
  Row,
  Col,
  Card,
  message,
  Radio,
} from 'antd';

const ButtonGroup = Button.Group;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

import myaxios, {get, put, post, deleteAxios} from 'common/fetch';
import {ARTICLE_URL} from 'constant/url';

import ArticleList from './List';
import EditArticle from './EditArticle';

class AllArticles extends Component {
  constructor(props) {
    super(props);
    this.state = {
      radioValue: 1,
    };
  }

  //单选框切换
  onRadioChange = e => {
    this.setState({
      radioValue: e.target.value,
    });
  };
  render() {
    const {match, location} = this.props,
          {radioValue} = this.state;

    const extraContent = (
      <div className={styles.extraContent}>
        <RadioGroup defaultValue="1" onChange={this.onRadioChange}>
          <RadioButton value="1">精选文章</RadioButton>
          <RadioButton value="0">众车论</RadioButton>
        </RadioGroup>
      </div>
    );
    return (
      <div>
        <PageHeader
          title="文章列表"
          action={
            <Link to="/article/add">
              <Button type="primary">
                <Icon type="plus" />新增文章
              </Button>
            </Link>
          }
          breadcrumbList={[
            {
              title: '文章列表',
              href: '/article',
            },
          ]}
          linkElement={Link}
          className={styles.pageHeader}
        />
        <div className={`${styles.content} ${styles['home-container']}`}>
          <Card style={{margin: 24}} bordered={false} extra={extraContent}>
            <ArticleList query={location.search} radioValue={radioValue} />
          </Card>
        </div>
      </div>
    );
  }
}

export default AllArticles;
